<template>

  <scroll-view class="goods-card" scroll-y>
  	<template v-if="type===1">
		<template v-for="(item,index) in useShop.buyCarList" :key="item">
  		<goodsCardInfo :goods="item" :type="type"></goodsCardInfo>
		</template>
  	</template>
	<template v-else>
		
	
  	<goodsCardInfo :goods="useShop.goodsI" :type="type"></goodsCardInfo>
		
  	<view class="goods-card-typeSelect">
  		<view class="goods-card-typeSelect-title">
  			规格
  		</view>
  		<view class="goods-card-typeSelect-choice">
  			<template v-for="(item,index) in typeChoice" :key="item">
  				<view class="goods-card-typeSelect-choice-item" :class="{active:optional===index}" @click="chooseType(index)" >{{item}}</view>
  			</template>
  		</view>
  	</view>

	

  	<view class="goods-card-count">
  		<view class="goods-card-count-title">
  			数量
  			
  		</view>
  		<view class="goods-card-count-numb">
  			<view class="reduce" @click.stop="reduceNum">
  				
  				－
  			</view>
  			<view class="count"><input type="text" v-model="useShop.goodsI.goodsNum"/></view>
  			<view class="enhance" @click.stop="enhanceNum">
  				＋
  			</view>
  			
  		</view>
  	</view>
  <view class="goods-option-btn">
  	<button class="addCar" @click="addShopCar()">加入购物车</button>
  	<button class="buyGoods">立即购买</button>
  </view>
 </template>
  </scroll-view>

</template>

<script setup>
	import goodsCardInfo from './goods-card-info.vue';
	import { computed, ref } from 'vue';
	
	import { useShopeList } from '@/store/shopData/useShop';
	const useShop=useShopeList()
	const {goodsI,typeChoice,buyPosition,type}=defineProps(['goodsI','typeChoice','buyPosition','type'])
	const emit=defineEmits(['reduceCount','boostCount','joinShopCar'])
	
	function reduceNum(){
		emit('reduceCount')
	}
	function enhanceNum(){
		emit('boostCount')
	}
	function addShopCar(goodsI){
		emit('joinShopCar',goodsI)
	}
	// buyPosition=computed(()={
	// 	if(type)
	// {	// #ifdef H5
	// 	return 90+'px'
	// 	     //#endif
	// 	return 0 +'px'
	// 	}
	// else{
	// 		// #ifdef H5
	// 			return 50+'px'
	// 			     //#endif
	// 			return 0 +'px'
	// 	}
	// })
	
	const optional=ref()
	function chooseType(index){
		optional.value=index
		useShop.goodsI.choose=typeChoice[index]
		
	}
	
</script>

<style lang="scss" scoped>
	
	.goods-card{
		
		width: 740rpx;
		height: 846rpx;
		padding-left: 34rpx;
		padding-right: 34rpx;
		padding-top:40rpx ;
		display: flex;
		flex-direction: column;
		justify-content:flex-start;
		align-items: center;
		padding-bottom: v-bind(buyPosition);
		background-color: #f4e1ff;
		border-radius: 25rpx 25rpx 0 0;
		.goods-card-top{
			display: flex;
			justify-content: flex-start;
			margin-bottom: 44rpx;
				gap: 18rpx;
			.goods-img{
				width: 180rpx;
				height: 180rpx;
				flex-shrink: 0;
				image{
					width: 180rpx;
					height: 180rpx;
				}
			}
			.goods-info{
				flex: 1;
			
					
				.goods-title{
					@include text-ellipsis(1);
				}
				.goods-type{
					font-size: 22rpx;
					
					color: rgba(153, 153, 153, 1);
					text{
						padding-right: 10rpx;
					}
				}
				.price-button{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.goods-price{
						display: flex;
						flex-direction: column;
						align-items: center;
					}
					.now-price{
						font-size: 36rpx;
						font-weight: 500;
						color:  rgba(255, 15, 35, 1);
					}
					.old-price{
						font-size: 20rpx;
						   text-decoration: line-through;
						  color: rgba(187, 187, 187, 1);
						
					}
					button{
						width: 102rpx;
						height: 40rpx;
						border-radius: 16rpx;
						font-size: 23rpx;
						line-height: 40rpx;
						color: rgba(255, 255, 255, 1);
						background-color: pink;
			
					}
				}
			}
			
		}
	.goods-card-typeSelect{
	width: 100%;
		margin-bottom: 52rpx;
		.goods-card-typeSelect-title{
			font-size: 34rpx;
			color: black;
			margin-bottom: 18rpx;
			
		}
		.goods-card-typeSelect-choice{
			width: 100%;
			height: 40rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
				
			.goods-card-typeSelect-choice-item{
				width: 142rpx;
				height: 40rpx;
				font-size: 25rpx;
				text-align: center;
				height: 40rpx;
				background-color: rgba(244, 244, 244, 1);
				@include text-ellipsis(1);
				&.active{
					background-color: rgba(189, 175, 141, 1);
				}
				
			}
			
	
		}
		
	}
	.goods-card-count{
		width: 750rpx;
		display: flex;
		height: 355rpx;
		text-align: center;
		justify-content: space-between;
		align-items: start;
		
		
		.goods-card-count-title{
			font-size: 34rpx;
			color: black;
			
		}
		.goods-card-count-numb{
					
			display: flex;
			
			margin-right: 60rpx;
			justify-content: center;
			align-items: start;
			text-align: center;
			gap: 20rpx;
			
			.reduce,.enhance{
				z-index: 10;
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 50%;
				background-color: #fff;
				border: 1px solid palevioletred;
				
				
			}
			:deep(.uni-input-input) {
				width: 40rpx !important;
			}
			
		}
	}
	
	.goods-option-btn{
		width: 640rpx;
		height: 80rpx;
		background-color: #f4ff14;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 30rpx;
		overflow: hidden;
		.addCar,.buyGoods{
		flex: 1;
			color: #fff;
		}
		.addCar{
			background-color: #d7d7d7;
		}
		.buyGoods{
			background-color:rgba(219, 211, 181, 1.0);
		}
	}
	}
</style>